<script lang="ts" setup>
import Menu from '@/components/Menu/index.vue'
import { MenuOutlined,CloseOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ref,inject } from 'vue';
import RedLantern from '@/components/RedLantern/index.vue'

const router = useRouter()
const $store = useStore()
let custromUserInfo = inject("custromUserInfo")
const goHome = () => {
    router.push('/')
}

let openDraw = () => {
    $store.commit('menu/SET_OPEN_STATUS',true)
}

</script>

<template>
  <header class="header">
    <RedLantern class="lx-red-lantern" v-if="custromUserInfo.showRedLantern"></RedLantern>
    <a-row class="flex head-row">
        <a-col class="header-col flex" :span="24">
            <div class="left-header" @click="goHome">
                <img class="logo-img" :src="custromUserInfo.avatar" alt="" srcset="">
                <span class="logo-title">{{ custromUserInfo.siteName }}</span>
            </div>
            <div class="right-header">
                <Menu class="pc-menu"></Menu>
                <a-button class="openMobiel" @click="openDraw">
                    <MenuOutlined />
                </a-button>
            </div>
        </a-col>
    </a-row>
  </header>
</template>

<style lang="scss" scoped>
.header {
    height: 56px;
    width: 100%;
    position: sticky;
    top: 0px;
    z-index: 99;
    .head-row {
        background: #fff;
        backdrop-filter: blur(100px);
        box-shadow: 0px 0px 5px 1px rgba(209, 208, 208, 0.25);
        &::after {
            content: '';
            position: absolute;
            backdrop-filter: blur(180px);
            width: 100%;
            height: 100%;
            z-index: -1;
        }
    }
    .header-col {
        padding: 0px 20px;
        width: 100%;
        height: 56px;
        justify-content: space-between;
        align-items: center;
    }
    .left-header {
        cursor: pointer;
        height: 100%;
        display: flex;
        align-items: center;
            .logo-img {
                width: 38px;
                height: 38px;
                border-radius: 5px;
            }
            .logo-title {
                font-family: '阿里妈妈';
                margin-left: 8px;
            }
    }
    .right-header {
        display: flex;
        align-items: center;
        height: 100%;
    }
}

/* xs: '480px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
  xxl: '1600px',
  xxxl: '2000px', */

// xs
::v-deep {
@media screen and (max-width: 480px){
    .menu {
        display: none;
    }
    .lx-red-lantern {
        display: none;
    }
}
// sm
@media screen and (max-width: 576px){
    .menu {
        display: none;
    }
    .lx-red-lantern {
        display: none;
    }
}

@media screen and (max-width: 768px){
    .menu {
        display: none;
    }
    .lx-red-lantern {
        display: none;
    }
}

@media screen and (min-width: 768px){
    .openMobiel {
        display: none;
    }
}
}
</style>